<template>
  <div id="app">
    <div class="top">
      <b
        >{{ pkg.name }} <i>&nbsp;{{ pkg.version }}</i></b
      >
      <i>Powered by tanqin</i>
    </div>
    <div class="nav">
      <div class="link">
        <router-link draggable="false" to="/">Todo</router-link> |
        <router-link draggable="false" to="/done">Done</router-link>
      </div>
      <div class="tools">
        <transition name="fade" mode="out-in">
          <i class="iconfont icon-download" v-if="$route.path === '/done'"></i>
        </transition>
      </div>
    </div>
    <div class="main scrollbar scrollbar-y">
      <transition name="fade-transform" mode="out-in">
        <!-- routing mount point -->
        <router-view />
      </transition>
    </div>
  </div>
</template>
<script>
import pkg from '../package.json'

export default {
  data() {
    return {
      pkg
    }
  }
}
</script>
<style lang="scss">
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px;
  border-radius: 5px;

  .top {
    -webkit-app-region: drag;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    padding: 0 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
  }

  .nav {
    display: flex;
    justify-content: space-between;
    height: 26px;
    padding: 0 20px;
    color: #ccc;
    user-select: none;
    .link {
      a {
        font-weight: bold;
        color: #ccc;
        text-decoration: none;
        &.router-link-exact-active {
          font-size: 20px;
          color: #fff;
        }
        &:hover {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .tools {
      display: flex;
      align-items: center;
      i {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

  .main {
    flex: 1;
    margin-top: 10px;
    overflow-y: auto;
    .main:hover::-webkit-scrollbar-thumb {
      display: block;
    }
  }
}
</style>
